
<template>
  <div :id="'zone_'+zone.id" class="chooseCar single_page">
      <div class="flowTitle"><a >  选择车位 </a></div>
      <div style="color: #FFF;display:inline-block;" class="ui-countdown"></div>
      <div style="padding-left: 2em;display:inline-block;"><a class="button button-orange button-diy"@click="back">返回分区</a></div> 
      <div class="window">
        <div class="real">
            <img id='rel' :src="zone.choosePath" draggable='false'>
            <ul class="car1_bigNew" id="bxCarBox">
                <li v-for="(car,i) in zone.carList" :id="'car_'+car.code" :style="'top:'+car.y+'px; left:'+car.x+'px;width:'+zone.liSize+'px;height:'+zone.liSize+'px;border-radius:'+zone.liSize/2+'px;'" class="drg"></li>
            </ul>
        </div>
      </div>
    </div>
</template>
<style type="text/css" lang="less" >
.chooseCar{
  overflow: hidden;
  .window{
    overflow: hidden;
    position: relative;
    top: 1em;
    .real{
      position: absolute;
      right: 0;
      top: 0;
      img{
        width: 100%;
        height: 100%;
        max-width: 100%;
        vertical-align: middle;
      }
      li{list-style: none;opacity: 0.7}
      .drg{position: absolute;cursor: pointer;background-color: #008000;}
      .yrg{position: absolute;background-color: #FF0305;}
      .rgz{position: absolute;background-color: #FFDA2B;}

    }
  }
}
</style>
<script>
import {get,compNav} from '../../public/js/utils.js'
import {newsilen} from '../../public/js/business.js'
import Mousewheel from '../../../static/jquery.mousewheel.min.js'
import CompCountdown from '../../components/countdown.vue'
import Swal from 'sweetalert'
export default {
  data: function () {
    return {
      zone:{},
      timerinfo:''
    }
  },
  props:['user','data'],
  components:{
    CompCountdown
  },
  mounted:async function(){
    this.init()
  },
  beforeDestroy(){
    clearInterval(this.timerinfo);
  },
  methods:{
    async init(){
      compNav(this)
      const r =await get('/car/list',{zone:this.data.id})
      this.data.carList = r.list
      this.zone =this.data
      this.$nextTick(() =>{
        newsilen.install(this.zone,this.getinfobyid)
        this.getallinfo()
      })
    },
    async getinfobyid(carId,carType){
      const r =await get('/car/getinfobyid',{num:carId})
      if(r.err){
        Swal('',r.msg,'error')
      }
      const carArr = [{id:carId}]
      // this.$root.setData('chooseCarArr',carArr)
      this.jump('comp-trade',carArr)
    },
    async getallinfo(){
        clearInterval(this.timerinfo);
        const statuback =await get('/car/getallinfo')
        if (statuback.length < 1){
            return;
        }
        for (var i = 0; i < statuback.length; i++) {
            var carstate = statuback[i].status;
            var anum = statuback[i].code; 
            var id = "car_" + anum;
            var showCode = g_carShow[anum]||anum;
            if (unescape(carstate) == "-1") {
                $("#" + id).removeClass("rgz").removeClass("drg").addClass("yrg");
            }
            else if (unescape(carstate) == "1") {
                $("#" + id).attr('tip',statuback[i].id).removeClass("rgz").removeClass("drg").addClass("yrg");
            }
            else if (unescape(carstate) == "0") {
                $("#" + id).attr('tip',statuback[i].id).removeClass("rgz").removeClass("yrg").addClass("drg");
            }
            else if (unescape(carstate) == "2") {
                $("#" + id).removeClass("drg").removeClass("yrg").addClass("rgz");
            }
        }
        this.timerinfo = setInterval(this.getallinfo, 3000);
    },
    back(){
      this.$parent.back('comp-choosearea')
    }
  }

}
</script>
